<template>
  <div class="digBox">
    <div class="form-box">
      <el-form ref="form" label-width="90px" :model="queryParams">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="员工账号:">
              <el-input v-model="queryParams.employeeNumber" placeholder="请输入员工账号" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="员工姓名:">
              <el-input v-model="queryParams.name" placeholder="请输入员工姓名" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工作模式:">
              <el-select v-model="queryParams.workPatternId" placeholder="请选择工作模式" size="small">
                <el-option v-for="item in workPatternList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="月份">
              <el-date-picker
                v-model="queryParams.month"
                type="month"
                placeholder="选择日期"
                size="small"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="所属机构:">
              <el-select v-model="queryParams.agencyId" clearable placeholder="请选择所属机构" size="small">
                <el-tree
                  node-key="id"
                  :data="treeData"
                  class="add_tree"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  :check-on-click-node="true"
                >
                  <span slot-scope="{data}" class="custom-tree-node">
                    <el-option
                      style="padding: 0"
                      :label="data.name"
                      :value="data.id"
                    />
                  </span>
                </el-tree>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="tbaby">
      <el-button type="primary" style="backgroundColor:#e15536;borderColor:#e15536" @click="$router.push('/employee/workArrange-setting')">排班设置</el-button>
      <el-button type="primary" style="backgroundColor:#ffeeeb;borderColor:#e15536;color:#e15536" @click="binding">绑定排班</el-button>

      <template>
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#EEF1F4', color: '#646a73' }" @select="onSelect">
          <el-table-column
            type="selection"
            width="35"
            show-overflow-tooltip
          />
          <el-table-column
            fixed
            align="center"
            prop="employeeNumber"
            label="员工账号"
            width="150"
          />
          <el-table-column
            fixed
            align="center"
            prop="name"
            label="员工姓名"
            width="150"
          />
          <el-table-column
            fixed
            align="center"
            prop="phone"
            label="员工电话"
            width="150"
          />
          <el-table-column
            fixed
            align="center"
            label="员工角色"
            width="150"
          >
            <template v-slot="{row}">
              <span v-if="row.userType===1">员工</span>
              <span v-else-if="row.userType===2">快递员</span>
              <span v-else>司机</span>

            </template>
          </el-table-column>
          <el-table-column
            fixed
            align="center"
            prop="workPatternName"
            label="当前工作模式"
            width="150"
          />
          <span v-for="(v,index) in numArr" :key="index">
            <el-table-column prop="workSchedules" align="center" width="50" :label="v">
              <template v-slot="{row}">
                <span v-if="row.workSchedules[index]" class="re1">休</span>
                <span v-else class="re2">上</span>
              </template>
            </el-table-column>
          </span>

        </el-table>
        <!-- 分页器 -->
        <div class="PageClass">
          <el-pagination
            align="center"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="pageChange"
          />
        </div>
      </template>
    </div>

    <!-- 绑定按钮弹窗 -->
    <el-dialog
      title="人工调整"
      :visible.sync="dialogVisible"
      width="50%"
      @close="dialogVisible=false"
    >
      <el-radio v-model="bingclassesParams.workPatternType" label="1">礼拜制</el-radio>
      <el-radio v-model="bingclassesParams.workPatternType" label="2">连续制</el-radio>

      <div>
        <span style="fontWeight:600">模式名称:</span>
        <el-select v-model="bingclassesParams.workPatternId" placeholder="请选择" size="small">
          <el-option v-for="item in workPatternList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="backgroundColor:#e15536;borderColor:#e15536" @click="bindOkBtn">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { bindClasses, getClassesList, getInstitutionList, getWorkModern } from '@/api/employee/classes'

export default {
  data() {
    return {
      tableData: [],
      numArr: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
      queryParams: {
        // 员工账号
        employeeNumber: '',
        // 网点
        agencyId: null,
        // 员工名称
        name: '',
        // 页码
        page: 1,
        // 页尺寸
        pageSize: 10,
        // 用户类型
        userType: '',
        // 工作模式id
        workPatternId: '',
        // 月份
        month: ''
      },
      total: null,
      treeData: [], // 树形机构列表
      workPatternList: [], // 工作模式下拉列表
      //  绑定排班参数
      bingclassesParams: {
        userIdList: [], // 用户ID列表
        userType: '', // 用户类型：1：员工，2：快递员，3:司机
        workPatternId: null, // 工作模式id
        workPatternType: '1' // 工作模式类型，1:礼拜制，2：连续制
      },
      dialogVisible: false, // 排班弹窗
      defaultProps: {
        children: 'children',
        label: 'name'
      }

    }
  },
  async created() {
    this.getList()
    // 工作模式下拉列表
    const res = await getWorkModern()
    console.log(res)
    console.log(res.data[1])
    this.workPatternList = res.data[1]

    // this.workModernList = res.data[1]
    // 获取所属机构下拉列表
    const res1 = await getInstitutionList()
    this.treeData = JSON.parse(res1.data)
  },
  methods: {
    // 初始化列表
    async getList() {
      const res = await getClassesList(this.queryParams)
      console.log(res)
      this.tableData = res.data.items
      this.total = +res.data.counts
      console.log(res.data.items)
    },

    // 点击分页页码
    pageChange(val) {
      this.queryParams.page = val
      this.getList()
    },
    // 模糊搜索
    search() {
      this.getList()
    },
    // 重置表单
    reset() {
      this.$refs.form.resetFields()
      console.log(11)
    },

    // 选中的复选框按钮
    onSelect(selection, row) {
      console.log(selection, row)
      this.bingclassesParams.userIdList.push(row.userId)
      this.bingclassesParams.userType = row.userType
    },
    // 点击绑定排版按钮
    binding() {
      if (this.bingclassesParams.userIdList.length === 0) {
        this.$message.error('请选择调整人员')
        return
      }
      this.dialogVisible = true
    },
    // 点击排班确定按钮
    async bindOkBtn() {
      const res = await bindClasses(this.bingclassesParams)
      console.log(res)
      this.$message.success('操作成功')
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
.digBox {
  background-color: #f3f5f9;
}
.form-box {
  background-color: #ffffff;
  /* width: 1550px; */
  padding: 20px 30px;
  margin: 20px;
}
.tbaby {
  background-color: #fff;
  padding: 20px;
  margin: 20px;
}
.el-table{
  margin-top: 20px;
}
.re2 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
  width: 20px;
  height: 20px;
  font-size: 12px;
  border-radius: 50%;
  border: 1px solid red;
  background-color: pink;
}
.re1 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
  width: 20px;
  height: 20px;
  font-size: 12px;
  border-radius: 50%;
  border: 1px solid #999;
  background-color: #eff3f8;
}
.PageClass {
  margin-top: 15px;
  background-color: #fff;
}
</style>
